<template>
  <div class="education-course-add-box">
    <div class="title">{{ courseFormat }}课程-新增</div>
    <div class="steps">
      <el-steps :active="steps" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="课程大纲"></el-step>
      </el-steps>
    </div>
    <!-- steps=1 -->
    <div class="form" v-show="steps === 0">
      <el-form
        ref="form"
        :rules="baseInfoRule"
        :model="baseInfo"
        label-width="100px"
      >
        <el-form-item label="课程名称：" prop="name">
          <el-input v-model="baseInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="课程标签：">
          <el-input v-model="baseInfo.label"></el-input>
        </el-form-item>
        <el-form-item label="课程分类：" prop="classify">
          <el-cascader
            :props="baseInfoProps"
            :options="classifyList"
            clearable
            v-model="baseInfo.classify"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="课程等级：" prop="level">
          <el-select v-model="baseInfo.level" placeholder="请选择">
            <el-option
              v-for="item in levelList"
              :key="item.levelId"
              :label="item.name"
              :value="item.levelId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程简介：">
          <el-input type="textarea" v-model="baseInfo.description"></el-input>
        </el-form-item>
        <el-form-item label="适用人群：" prop="person">
          <el-input type="textarea" v-model="baseInfo.person"></el-input>
        </el-form-item>
        <el-form-item label="课程封面：" prop="courseImage">
          <div class="upload">
            <el-upload
              class="avatar-uploader"
              action="/api/v1/user/course/course/uploadCourseImage"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <el-link style="margin-top: 240px" type="primary"
            >课程封面模板规范</el-link
          >
        </el-form-item>
        <el-form-item label="课程类型：" prop="type">
          <el-radio v-model="baseInfo.type" label="0">免费</el-radio>
          <el-radio v-model="baseInfo.type" label="1">收费</el-radio>
        </el-form-item>
        <el-form-item
          label="原价："
          :prop="baseInfo.type === '1' ? 'oldPrice' : ''"
        >
          <el-input
            v-model="baseInfo.oldPrice"
            :disabled="baseInfo.type === '0'"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="现价："
          :prop="baseInfo.type === '1' ? 'newPrice' : ''"
        >
          <el-input
            v-model="baseInfo.newPrice"
            :disabled="baseInfo.type === '0'"
          ></el-input>
        </el-form-item>
        <el-form-item label="咨询QQ：">
          <el-input v-model="baseInfo.qq"></el-input>
        </el-form-item>
        <el-form-item label="微信号：">
          <el-input v-model="baseInfo.weixin"></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="baseInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="有效期(天)：">
          <el-input v-model="baseInfo.expirationDate"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="steps === 1" class="tree">
      <div style="margin: 30px 0">
        <span>任务总数：{{ task }}</span
        ><el-button
          style="margin-left: 20px"
          size="small"
          icon="el-icon-plus"
          type="primary"
          plain
          @click="addChapter"
          >添加章节</el-button
        >
      </div>
      <el-tree
        default-expand-all
        :data="courseOutline"
        :props="defaultProps"
        node-key="id"
      >
        <!-- 章节 -->
        <span
          v-if="data.type === 0"
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <span
            @click="OutlineChangeFlag(node, data, false)"
            v-if="data.flag"
            >{{ data.isInput ? node.label : '章节名称[点击修改]' }}</span
          >
          <el-input
            style="width: 300px"
            v-else
            v-model="courseOutline[getParentId(data.id)].name"
            :ref="'myInput' + data.id"
            @blur="OutlineChangeFlag(node, data, true)"
          ></el-input>
          <span>
            <el-button type="text" size="mini" @click="addSection(node, data)">
              添加小节
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="removeOutline(node, data)"
            >
              删除本章
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="OutlineMoveUp(node, data)"
            >
              上移
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="OutlineMoveDown(node, data)"
            >
              下移
            </el-button>
          </span>
        </span>
        <!-- 小节 -->
        <span v-else class="custom-tree-node" slot-scope="{ node, data }">
          <span
            @click="SectionChangeFlag(node, data, false)"
            v-if="data.flag"
            >{{ data.isInput ? node.label : '小节名称[点击修改]' }}</span
          >
          <el-input
            style="width: 300px"
            v-else
            v-model="
              courseOutline[getParentId(node.parent.data.id)].children[
                getChildrenId(data.id)
              ].name
            "
            :ref="'myInput' + data.id"
            @blur="SectionChangeFlag(node, data, true)"
          ></el-input>
          <span>
            <el-button
              :style="data.video === '' ? '' : 'color:#67C23A'"
              type="text"
              size="mini"
              @click="addVideo(node, data)"
            >
              {{ data.video === '' ? '添加视频' : '添加成功' }}
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="removeSection(node, data)"
            >
              删除
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="SectionMoveUp(node, data)"
            >
              上移
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="SectionMoveDown(node, data)"
            >
              下移
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div style="margin-left: 340px; margin-top: 50px">
      <el-button style="margin-top: 12px" v-show="steps > 0" @click="perior"
        >上一步</el-button
      >
      <el-button style="margin-top: 12px" v-show="steps < 2" @click="next"
        >下一步</el-button
      >
      <el-button type="primary" @click="commit(1)" v-show="steps === 2"
        >存草稿</el-button
      >
      <el-button type="success" @click="commit(2)" v-show="steps === 2"
        >提交审核</el-button
      >
    </div>
    <div></div>
    <!-- 添加视频弹出层 -->
    <el-dialog
      title="上传视频"
      :visible.sync="VideoUploaddialogVisible"
      width="30%"
      :show-close="false"
    >
      <span
        >请上传一段视频<el-link type="primary"
          >学成在线视频上传规则</el-link
        ></span
      >
      <VideoUploadCom
        ref="VideoUploadCom"
        action="/api/v1/user/course/course/uploadCourseImage"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadVideoCancel">取 消</el-button>
        <el-button type="primary" @click="uploadVideoCommit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import http_classify from '@/https/user/course/classify.js'
import http_level from '@/https/user/course/level.js'
import http_course from '@/https/user/course/course.js'
import { v4 as uuidv4 } from 'uuid'
import VideoUploadCom from '@/components/VideoUpload.vue'
import lodash from 'lodash'
import Cookies from 'js-cookie'
export default {
  name: 'education-course-add',
  data() {
    return {
      // 获得路由中的课程形式
      courseFormat: '',
      // 步骤条
      steps: 0,
      // 第一步基本信息
      baseInfo: {
        name: '',
        label: '',
        classify: '',
        level: '',
        description: '',
        person: '',
        courseImage: '',
        type: '1',
        oldPrice: '',
        newPrice: '',
        qq: '',
        weixin: '',
        phone: '',
        expirationDate: '',
      },
      // 第一步基本信息的表单验证规则
      baseInfoRule: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur',
          },
        ],
        classify: [
          { required: true, message: '请选择课程分类', trigger: 'blur' },
        ],
        level: [{ required: true, message: '请选择课程等级', trigger: 'blur' }],
        person: [
          { required: true, message: '请输入适用人群', trigger: 'blur' },
        ],
        type: [{ required: true, message: '请选择课程类型', trigger: 'blur' }],
        oldPrice: [{ required: true, message: '请输入原价', trigger: 'blur' }],
        newPrice: [{ required: true, message: '请输入现价', trigger: 'blur' }],
        courseImage: [
          { required: true, message: '请上传课程封面', trigger: 'blur' },
        ],
      },
      //
      baseInfoProps: {
        label: 'name',
        value: 'classifyId',
      },
      classifyList: [], //课程分类列表
      levelList: [], //课程等级分类列表
      imageUrl: '', //课程封面图片地址
      // 显示添加课程的数量
      task: 0,
      // 课程大纲结构
      courseOutline: [], //{name:名称，type:0(章节) 1(小结) flag:true(显示span)false (显示input),isInput:true(输入了内容)false(没有输入内容)，children:小节[{name\type\video（视频地址），flag，isInput}]}
      // 树形格式设置
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
      },
      // 上传视频对话框
      VideoUploaddialogVisible: false,
      // 正在上传视频的节点信息
      videoData: {
        parentId: '',
        childrenId: '',
      },
    }
  },
  methods: {
    // 提交
    async commit(status) {
      // 整理course表的信息
      let baseInfo = lodash.cloneDeep(this.baseInfo)
      const userInfo = this.getCookeieUserInfo()
      baseInfo.userId = userInfo.userId
      baseInfo.taskNumber = this.task
      baseInfo.classifyId = baseInfo.classify[1]
      baseInfo.levelId = baseInfo.level
      baseInfo.isPay = baseInfo.type
      baseInfo.type = this.courseFormat === '直播' ? 0 : 1
      if (baseInfo.isPay === '0') {
        baseInfo.oldPrice = 0
        baseInfo.newPrice = 0
      }
      baseInfo.status = status
      // 整理outline表的信息
      const outlineList = []
      for (let i = 0; i < this.courseOutline.length; i++) {
        const outline_p = lodash.cloneDeep(this.courseOutline[i])
        outline_p.children = undefined
        outline_p.parentId = null
        outline_p.outlineId = outline_p.id
        outlineList.push(outline_p)
        for (let j = 0; j < this.courseOutline[i].children.length; j++) {
          const outline_c = lodash.cloneDeep(this.courseOutline[i].children[j])
          outline_c.children = undefined
          outline_c.parentId = this.courseOutline[i].id
          outline_c.outlineId = outline_c.id
          outlineList.push(outline_c)
        }
      }
      // 发送网络请求
      const result = await http_course.saveCourse({
        baseInfo,
        outlineList,
      })
      if (result.data.code === 200) {
        const statusStr = status === 1 ? '存入草稿成功' : '提交审核成功'
        this.$message({
          message: '恭喜你，' + statusStr,
          type: 'success',
        })
        this.$router.push('/education/course')
      } else {
        this.$message.error(result.data.message)
      }
    },
    // 获得课程分类列表
    async getClassifyList() {
      const result = await http_classify.getAll()
      if (result.data.code === 200) {
        this.classifyList = result.data.data
      } else {
        this.$message.error(res.data.message)
      }
    },
    // 获得课程等级列表
    async getLevelList() {
      const result = await http_level.getAll()
      if (result.data.code === 200) {
        this.levelList = result.data.data
      } else {
        this.$message.error(res.data.message)
      }
    },
    // 从cookie中获得用户信息
    getCookeieUserInfo() {
      const info = Cookies.get('userInfo')
      if (info !== undefined) {
        const infoObj = JSON.parse(info)
        Cookies.set('userInfo', info, { expires: 60 })
        return infoObj
      } else {
        return undefined
      }
    },
    // 修改cookie的信息
    setCookeieUserInfo(updateName, updateData) {
      const result = JSON.parse(Cookies.get('userInfo'))
      if (result !== undefined) {
        result[updateName] = updateData
      }
      Cookies.set('userInfo', JSON.stringify(result), { expires: 60 })
    },
    // 点击下一步按钮
    async next() {
      if (this.steps < 2) {
        if (this.steps === 0) {
          try {
            const result = await this.$refs.form.validate()
            if (result) {
              this.steps = this.steps + 1
            } else {
              this.$refs.form.validateField()
            }
          } catch (error) {
            this.$message.error(error)
          }
        } else if (this.steps === 1) {
          // 没有大纲
          if (this.courseOutline.length === 0) {
            this.$message.error('请创建视频大纲')
            return
          }
          for (let i = 0; i < this.courseOutline.length; i++) {
            if (this.courseOutline[i].children.length === 0) {
              this.$message.error(
                '章节不能为空，请删除本章节或者在本章节下创建小节'
              )
              return
            }
            if (this.courseOutline[i].name === '') {
              this.$message.error('章节名称不能为空')
              return
            }
            for (let j = 0; j < this.courseOutline[i].children.length; j++) {
              if (this.courseOutline[i].children[j].video === '') {
                this.$message.error('章节视频不能为空，请上传视频')
                return
              }
              if (this.courseOutline[i].children[j].name === '') {
                this.$message.error('小节名称不能为空')
                return
              }
            }
          }
          this.steps = this.steps + 1
          // 存在章节但是下面没有小节
        } else {
          this.steps = this.steps + 1
        }
      }
    },
    // 点击上一步按钮
    perior() {
      if (this.steps > 0) {
        this.steps = this.steps - 1
      }
    },
    // 上传课程封面图片回调函数
    async handleAvatarSuccess(res, file) {
      if (res.code === 200) {
        if (this.baseInfo.courseImage !== '') {
          const result = await http_course.deleteCourseImage(
            this.baseInfo.courseImage
          )
          console.log(result)
          if (result.data.code === 200) {
            this.baseInfo.courseImage = res.data
            this.imageUrl = URL.createObjectURL(file.raw)
            this.$message({
              message: '上传成功',
              type: 'success',
            })
          } else {
            this.$message.error(res.data.message)
          }
        } else {
          this.baseInfo.courseImage = res.data
          this.imageUrl = URL.createObjectURL(file.raw)
          this.$message({
            message: '上传成功',
            type: 'success',
          })
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // 上传图片封面前检查
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/bmp'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传图片只能是jpg/png/bmp格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过2MB!')
      }
      return isJPG && isLt2M
    },
    // 添加章节
    addChapter() {
      this.courseOutline.push({
        id: uuidv4(),
        name: '',
        type: 0,
        flag: true,
        isInput: false,
        children: [],
      })
    },
    // 添加小节
    addSection(node, data) {
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (data.id === this.courseOutline[i].id) {
          this.courseOutline[i].children.push({
            id: uuidv4(),
            name: '',
            type: 1,
            flag: true,
            isInput: false,
            video: '',
            children: [],
          })
          this.task++
          break
        }
      }
    },
    // 删除章节
    async removeOutline(node, data) {
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (data.id === this.courseOutline[i].id) {
          if (this.courseOutline[i].children.length !== 0) {
            const courseImageList = []
            for (let j = 0; j < this.courseOutline[i].children.length; j++) {
              if (this.courseOutline[i].children[j].video !== '') {
                courseImageList.push(this.courseOutline[i].children[j].video)
              }
            }
            if (courseImageList.length > 0) {
              const result = await http_course.bulkDeleteCourseImage(
                courseImageList
              )
              if (result.data.code === 200) {
                this.courseOutline.splice(i, 1)
                this.task = this.task - node.childNodes.length
              } else {
                this.$message.error(result.data.message)
              }
            } else {
              this.courseOutline.splice(i, 1)
              this.task = this.task - node.childNodes.length
            }
          } else {
            this.courseOutline.splice(i, 1)
            this.task = this.task - node.childNodes.length
          }
          break
        }
      }
    },
    // 章节上移
    OutlineMoveUp(node, data) {
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (data.id === this.courseOutline[i].id) {
          if (i !== 0) {
            const id = this.courseOutline[i].id
            const name = this.courseOutline[i].name
            const type = this.courseOutline[i].type
            const flag = this.courseOutline[i].flag
            const isInput = this.courseOutline[i].isInput
            const children = this.courseOutline[i].children

            this.courseOutline[i].id = this.courseOutline[i - 1].id
            this.courseOutline[i - 1].id = id

            this.courseOutline[i].name = this.courseOutline[i - 1].name
            this.courseOutline[i - 1].name = name

            this.courseOutline[i].type = this.courseOutline[i - 1].type
            this.courseOutline[i - 1].type = type

            this.courseOutline[i].flag = this.courseOutline[i - 1].flag
            this.courseOutline[i - 1].flag = flag

            this.courseOutline[i].isInput = this.courseOutline[i - 1].isInput
            this.courseOutline[i - 1].isInput = isInput

            this.courseOutline[i].children = this.courseOutline[i - 1].children
            this.courseOutline[i - 1].children = children
          } else {
            this.$message({
              message: '已经在第一项',
              type: 'warning',
            })
          }
          break
        }
      }
    },
    // 章节下移
    OutlineMoveDown(node, data) {
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (data.id === this.courseOutline[i].id) {
          if (i !== this.courseOutline.length - 1) {
            const name = this.courseOutline[i].name
            const children = this.courseOutline[i].children

            this.courseOutline[i].name = this.courseOutline[i + 1].name
            this.courseOutline[i + 1].name = name

            this.courseOutline[i].children = this.courseOutline[i + 1].children
            this.courseOutline[i + 1].children = children
          } else {
            this.$message({
              message: '已经在最后一项',
              type: 'warning',
            })
          }
          break
        }
      }
    },
    // 改变章节文本和输入框的状态
    OutlineChangeFlag(node, data, flag) {
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (data.id === this.courseOutline[i].id) {
          this.courseOutline[i].flag = flag
          if (!flag) {
            const refStr = 'myInput' + data.id
            setTimeout(() => {
              this.$refs[refStr].focus()
            }, 500)
          } else {
            if (
              !(
                this.courseOutline[i].name === '' ||
                this.courseOutline[i].name === '章节名称[点击修改]'
              )
            ) {
              this.courseOutline[i].isInput = true
            }
          }
          break
        }
      }
    },
    //改变小节文本和输入框的状态
    SectionChangeFlag(node, data, flag) {
      const parentId = node.parent.data.id
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (this.courseOutline[i].id === parentId) {
          for (let j = 0; j < this.courseOutline[i].children.length; j++) {
            if (this.courseOutline[i].children[j].id === data.id) {
              this.courseOutline[i].children[j].flag = flag
              if (!flag) {
                const refStr = 'myInput' + data.id
                setTimeout(() => {
                  this.$refs[refStr].focus()
                }, 500)
              } else {
                if (
                  !(
                    this.courseOutline[i].children[j].name === '' ||
                    this.courseOutline[i].children[j].name ===
                      '小节名称[点击修改]'
                  )
                ) {
                  this.courseOutline[i].children[j].isInput = true
                }
              }

              break
            }
          }
          break
        }
      }
    },
    // 添加视频
    addVideo(node, data) {
      this.videoData.parentId = node.parent.data.id
      this.videoData.childrenId = data.id
      this.VideoUploaddialogVisible = true

      this.$nextTick(() => {
        this.$refs.VideoUploadCom.storageurl = ''
        if (data.video !== '') {
          this.$refs.VideoUploadCom.storageurl = data.video
        }
      })
    },
    // 删除小节
    async removeSection(node, data) {
      const parentId = node.parent.data.id
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (this.courseOutline[i].id === parentId) {
          for (let j = 0; j < this.courseOutline[i].children.length; j++) {
            if (this.courseOutline[i].children[j].id === data.id) {
              if (data.video !== '') {
                const result = await http_course.deleteCourseImage(data.video)
                if (result.data.code === 200) {
                  this.courseOutline[i].children.splice(j, 1)
                  this.task--
                } else {
                  this.$message.error(result.data.message)
                }
              } else {
                this.courseOutline[i].children.splice(j, 1)
                this.task--
              }
              break
            }
          }
          break
        }
      }
    },
    // 小节上移
    SectionMoveUp(node, data) {
      const parentId = node.parent.data.id
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (this.courseOutline[i].id === parentId) {
          for (let j = 0; j < this.courseOutline[i].children.length; j++) {
            if (this.courseOutline[i].children[j].id === data.id) {
              if (j !== 0) {
                const id = this.courseOutline[i].children[j].id
                const name = this.courseOutline[i].children[j].name
                const type = this.courseOutline[i].children[j].type
                const flag = this.courseOutline[i].children[j].flag
                const isInput = this.courseOutline[i].children[j].isInput
                const video = this.courseOutline[i].children[j].video

                this.courseOutline[i].children[j].id =
                  this.courseOutline[i].children[j - 1].id
                this.courseOutline[i].children[j - 1].id = id

                this.courseOutline[i].children[j].name =
                  this.courseOutline[i].children[j - 1].name
                this.courseOutline[i].children[j - 1].name = name

                this.courseOutline[i].children[j].type =
                  this.courseOutline[i].children[j - 1].type
                this.courseOutline[i].children[j - 1].type = type

                this.courseOutline[i].children[j].flag =
                  this.courseOutline[i].children[j - 1].flag
                this.courseOutline[i].children[j - 1].flag = flag

                this.courseOutline[i].children[j].isInput =
                  this.courseOutline[i].children[j - 1].isInput
                this.courseOutline[i].children[j - 1].isInput = isInput

                this.courseOutline[i].children[j].video =
                  this.courseOutline[i].children[j - 1].video
                this.courseOutline[i].children[j - 1].video = video
              } else {
                this.$message({
                  message: '已经在第一项',
                  type: 'warning',
                })
              }

              break
            }
          }
          break
        }
      }
    },
    // 小节下移
    SectionMoveDown(node, data) {
      const parentId = node.parent.data.id
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (this.courseOutline[i].id === parentId) {
          for (let j = 0; j < this.courseOutline[i].children.length; j++) {
            if (this.courseOutline[i].children[j].id === data.id) {
              if (j !== this.courseOutline[i].children.length - 1) {
                const id = this.courseOutline[i].children[j].id
                const name = this.courseOutline[i].children[j].name
                const type = this.courseOutline[i].children[j].type
                const flag = this.courseOutline[i].children[j].flag
                const isInput = this.courseOutline[i].children[j].isInput
                const video = this.courseOutline[i].children[j].video

                this.courseOutline[i].children[j].id =
                  this.courseOutline[i].children[j + 1].id
                this.courseOutline[i].children[j + 1].id = id

                this.courseOutline[i].children[j].name =
                  this.courseOutline[i].children[j + 1].name
                this.courseOutline[i].children[j + 1].name = name

                this.courseOutline[i].children[j].type =
                  this.courseOutline[i].children[j + 1].type
                this.courseOutline[i].children[j + 1].type = type

                this.courseOutline[i].children[j].flag =
                  this.courseOutline[i].children[j + 1].flag
                this.courseOutline[i].children[j + 1].flag = flag

                this.courseOutline[i].children[j].isInput =
                  this.courseOutline[i].children[j + 1].isInput
                this.courseOutline[i].children[j + 1].isInput = isInput

                this.courseOutline[i].children[j].video =
                  this.courseOutline[i].children[j + 1].video
                this.courseOutline[i].children[j + 1].video = video
              } else {
                this.$message({
                  message: '已经在最后一项',
                  type: 'warning',
                })
              }

              break
            }
          }
          break
        }
      }
    },
    // 根据id获得父项目的下标
    getParentId(id) {
      for (let i = 0; i < this.courseOutline.length; i++) {
        if (this.courseOutline[i].id === id) {
          return i
        }
      }
    },
    // 根据id获得子项目的下标
    getChildrenId(id) {
      for (let i = 0; i < this.courseOutline.length; i++) {
        for (let j = 0; j < this.courseOutline[i].children.length; j++) {
          if (this.courseOutline[i].children[j].id === id) {
            return j
          }
        }
      }
    },
    // 上传视频点击取消
    async uploadVideoCancel() {
      const parentId = this.getParentId(this.videoData.parentId)
      const childrenId = this.getChildrenId(this.videoData.childrenId)
      const video = this.courseOutline[parentId].children[childrenId].video
      if (video !== '') {
        this.VideoUploaddialogVisible = false
        return
      }

      const storageurl = this.$refs.VideoUploadCom.storageurl
      if (storageurl === '') {
        this.VideoUploaddialogVisible = false
      } else {
        const result = await http_course.deleteCourseImage(storageurl)
        if (result.data.code === 200) {
          this.courseOutline[parentId].children[childrenId].video = ''
          this.VideoUploaddialogVisible = false
        } else {
          this.$message.error(result.data.message)
        }
      }
    },
    async uploadVideoCommit() {
      const parentId = this.getParentId(this.videoData.parentId)
      const childrenId = this.getChildrenId(this.videoData.childrenId)
      const video = this.courseOutline[parentId].children[childrenId].video

      if (video !== '') {
        const result = await http_course.deleteCourseImage(video)
        if (result.data.code === 200) {
          const storageurl = this.$refs.VideoUploadCom.storageurl
          if (storageurl === '') {
            this.$message.error('请上传一段视频')
          } else {
            this.courseOutline[parentId].children[childrenId].video = storageurl
            this.VideoUploaddialogVisible = false
          }
        } else {
          this.$message.error(result.data.message)
        }
      } else {
        const storageurl = this.$refs.VideoUploadCom.storageurl
        if (storageurl === '') {
          this.$message.error('请上传一段视频')
        } else {
          this.courseOutline[parentId].children[childrenId].video = storageurl
          this.VideoUploaddialogVisible = false
        }
      }
    },
  },
  created() {
    this.courseFormat = this.$route.params.courseFormat
    this.getClassifyList()
    this.getLevelList()
  },
  components: {
    VideoUploadCom,
  },
}
</script>

<style lang="scss">
.education-course-add-box {
  margin-top: 30px;
  .title {
    font-size: 22px;
  }
  .steps {
    margin-top: 20px;
  }
  .form {
    position: relative;
    width: 60%;
    margin: 0 auto;
    height: 1100px;
    .upload {
      position: absolute;
      left: -130px;
      top: 0px;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
  .tree {
    width: 70%;
    margin: 0 auto;
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
    .el-tree-node__content {
      height: 50px;
      background-color: #f2f1f2;
      margin: 10px;
    }
    .el-tree-node__content:hover {
      background-color: #ebf6ff;
    }
    .el-tree-node__children {
      margin-left: 50px;
    }
  }
}
</style>
